import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal, Button, Spin, Popover, Menu, Dropdown } from 'antd';
import { WeaBrowser, WeaUpload, WeaTableEditable, WeaLocaleProvider, WeaDropdown } from 'ecCom';
import * as Util from '../../../util/Util';
const toJS = mobx.toJS;
const confirm = Modal.confirm
const getLabel = WeaLocaleProvider.getLabel;
@inject('planViewStore')
@observer
export default class RelateFiles extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.store = this.props.planViewStore;
    }



    render() {
        const { filearry, loading, category, maxsize, canedit, planid } = this.store
        let data = toJS(filearry) ? toJS(filearry) : []
        return (
            // <Spin spinning={loading}>
            <div className="">
                { category == undefined && canedit &&<div className="no-config-category">{getLabel('388853','未设置附件上传目录') }</div>}
                <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@adcwth`}
                    // showTitle={true}
                    showCopy={false}
                    draggable={false}
                    pushTitleIntoHeader={false}
                    columns={this.tableColumns()}
                    buttonsType="inline"
                    datas={data}
                    willAdd={this.willAdd}
                    willDelete={this.willDelete}
                    //    tableProps={this.getSummaryTableProps()}
                    showAdd={(category != undefined && canedit)}
                    showDelete={category != undefined && canedit}
                    getRowSelection={rowSelection => {
                        const sel = { ...rowSelection };
                        return canedit ? sel : null;
                    }}
                />
                <div style={{ display: 'none' }}>
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@0kahmz`} uploadUrl={'/api/doc/upload/uploadFile2Doc?category=' + category} category={category ? category : ''}
                        viewAttr='1' showClearAll={false} autoUpload={true} maxUploadSize={maxsize}
                        onUploading={this.onUploading}
                        // getShowListDatas={(listT, listB) => this.setUploading(listB)}
                        datas={[]}
                        onChange={(ids, list) => this.uploadChange(ids, list)} ref={'planupload'}
                    ><div ref={'btn'} type="primary">
                            选择
                        </div>
                    </WeaUpload>
                </div>
            </div>
            // </Spin>
        );
    }
    willAdd = (datas, addData) => {
        this.refs.btn.click()
        datas.pop();
        return datas;
    };
    willDelete = (datas, keys) => {
        let _ = this
        Modal.confirm({
            title: getLabel(15172, '系统提示'),
            content: getLabel(127574, '确定删除吗？'),
            onOk: () => {
                let fileids = ','
                if (datas && datas.length > 0) {
                    datas.forEach(d => {
                        fileids += d.id
                        fileids += ','
                    })
                } else {
                    fileids = ''
                }
                _.store.setValue('fileids', fileids)
                _.store.setValue("filearry", datas)
                _.store.doOperation('save')
            },
        });
        // return true;
    };

    tableColumns = () => {
        let _ = this
        const { planid } = this.store
        return [
            {
                title: (
                    <span >
                        {getLabel(195, '名称')}
                    </span>
                ),
                dataIndex: "name",
                width: "50%",
                com: [
                    {
                        type: "TEXT",
                        key: "text",
                        defaultValue: "",
                        viewAttr: 1
                    },
                ],
                render: (text, record, index) => {
                    return <a href="javascript:void(0);" onClick={() => {
                        _.store.viewDocFiled({
                            id: record.id, relateId: _.store.planid, type: 4, doback: function () {
                                Util.opendoc(record.id);
                            }
                        });
                    }}>{record.name}</a>
                }
            },
            {
                title: (
                    <span >
                        {getLabel('19998', '附件大小')}
                    </span>
                ),
                dataIndex: "size",
                width: "50%",
                com: [
                    {
                        type: "TEXT",
                        key: "text",
                        defaultValue: "",
                        viewAttr: 1
                    },
                ]
            },
            {
                title: (
                    <span>
                    </span>
                ),
                dataIndex: "customrender",
                key: "customrender",
                com: [
                    {
                        type: "CUSTOM",
                        key: "customrender",
                        render: (text, record, index, onEdit) => (
                            <div className='file-operation-col'>
                                <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@yhni40@${record.id}`} overlay={
                                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@hqstny@${record.id}`} onClick={(e)=>{if(e.key=='1'){
                                        window.downloadFile(record.id, record.fileid, planid, 4)
                                    }}}>
                                        <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_Menu.Item@4z42ak@${record.id}`} className="file-operation-col-menu-item" key="1" >{getLabel(258, '下载')}</Menu.Item>
                                    </Menu>
                                }>
                                    <i className='icon-coms-more' style={{fontSize:'20px'}}></i>
                                </Dropdown>
                            </div>
                        )
                    }
                ]
            },
        ]
    }
    /**上传附件 */
    uploadChange = (ids, list) => {
        this.store.onUploadChange(ids, list)
    }
    onUploading = (status) => {
        if (status == 'uploading') {
            this.store.setValue('loading', true)
        } else {
            this.store.setValue('loading', false)
        }
    }

}
